<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆形和文本</title>
	</head>
	<body>
		<canvas id="c1" width="400" height="400"></canvas>
		<canvas id="c2" width="1000" height="400"></canvas>
		<script>
			var c1 = document.getElementById('c1');
			var ctx = c1.getContext('2d');
						
// 绘制圆   中心点/半径/起始位置/弧度，false顺时针，true逆时针
			ctx.arc(200,200,100,0,2 * Math.PI,false);
			
			ctx.fillStyle = 'darkgray';
			ctx.fill();
			ctx.stroke();
			
// 绘制文本			
			var c2 = document.getElementById('c2');
			var ctx = c2.getContext('2d');		
			ctx.font = '25px 微软雅黑';
			// 设置阴影
			ctx.shadowBlur = 10;
			ctx.shadowColor = 'rgba(0, 0, 0, 1)';
			ctx.shadowOffsetX = 5;
			ctx.shadowOffsetY = 5;
		    // 绘制文本
			var x = 1000;
			setInterval(function(){
				ctx.clearRect(0,0,1000,400);
				x -= 5;
				if(x < -150){
					x = 1000;
				}
				ctx.fillText('hello world',x,100);
				ctx.strokeText('hello world',x,150);
			},30)
		</script>
	</body>
</html>
